﻿@page "/gallery/autoform"
@using MyApp.Client.Pages.gallery.AutoForm

<Breadcrumbs>
    <Breadcrumb href="/gallery">
        gallery
    </Breadcrumb>
    <Breadcrumb>
        AutoForm Examples
    </Breadcrumb>
</Breadcrumbs>

<ApiReference Component="AutoCreateForm<Model>">
    Create Form
</ApiReference>

<p class="mb-4 text-lg">
    <code>AutoCreateForm</code> can be used to create an automated form based from a Request DTO definition:
</p>

<ExampleCode Path="/gallery/AutoForm/New.razor" />

<iframe class="w-full mb-8" style="height:45em" src="/gallery/autoform/create" />

<p class="my-4 text-lg">
    By default Auto Forms are rendered in a Slide Over dialog, alternatively they can be rendered in a traditional inline Form with 
    <code>FormStyle.Card</code>, e.g:
</p>

<ExampleCode Path="/gallery/AutoForm/NewCard.razor" />

<div class="max-w-screen-md">
    <NewCard />
</div>

<ApiReference Component="AutoEditForm<Model>">
    Edit Form
</ApiReference>

<p class="mb-4 text-lg">
    <code>AutoEditForm</code> can be used to render an automated form based to update and delete an 
    <TextLink href="https://docs.servicestack.net/autoquery-crud">AutoQuery CRUD</TextLink> API.
</p>

<ExampleCode Path="/gallery/AutoForm/Edit.razor" />

<iframe class="w-full mb-8" style="height:41em" src="/gallery/autoform/edit" />

<p class="my-4 text-lg">
    The same form rendered in a traditional inline form with <code>FormStyle.Card</code>:
</p>

<ExampleCode Path="/gallery/AutoForm/EditCard.razor" />

<div class="max-w-screen-md">
    <EditCard />
</div>

<p class="my-4 text-lg">
    The forms behavior and appearance is further customizable with the
    <TextLink href="https://docs.servicestack.net/locode/declarative#annotate-apis">API annotation</TextLink>,
    declarative <TextLink href="https://docs.servicestack.net/locode/declarative#type-validation-attributes">validation</TextLink>
    and the custom
    <TextLink href="https://docs.servicestack.net/locode/declarative#custom-fields-and-inputs">Field and Input</TextLink>
    attributes, e.g:
</p>

<ExampleCode SourceCode=@ExampleDto Language="language-csharp" />

@code {
        string ExampleDto = @"[Description(""Update an existing Booking"")]
[Notes(""Find out how to quickly create a <a class='svg-external' target='_blank' href='https://youtu.be/rSFiikDjGos'>C# Bookings App from Scratch</a>"")]
[Route(""/booking/{Id}"", ""PATCH"")]
[ValidateHasRole(""Employee"")]
[AutoApply(Behavior.AuditModify)]
public class UpdateBooking : IPatchDb<Booking>, IReturn<IdResponse>
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public RoomType? RoomType { get; set; }
    [ValidateGreaterThan(0)]
    public int? RoomNumber { get; set; }
    [ValidateGreaterThan(0)]
    public decimal? Cost { get; set; }
    public DateTime? BookingStartDate { get; set; }
    public DateTime? BookingEndDate { get; set; }
    [Input(Type = ""textarea"")]
    public string? Notes { get; set; }
    public bool? Cancelled { get; set; }
}";

}

<ApiReference Component="AutoFormFields<Model>">
    Form Fields
</ApiReference>

<p class="mb-4 text-lg">
    For more advanced customization on a Forms appearance and behavior, you can use <code>AutoFormFields</code> to just render the Form's fields including
    Validation binding that you can then use to populate and send a custom Request DTO, e.g:
</p>

<div class="max-w-screen-md">
    <Fields />
</div>

<ExampleCode Path="/gallery/AutoForm/Fields.razor" />
